<template>
   <div class="home-view has-header">
       <sub-nav mold="quickNav"></sub-nav>
       <list mold="thumbnail" :items="events"></list>
      <!-- 将InfiniteLoading组件的ref属性设置为infiniteLoading，要用它来触发事件。 -->
      <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
          <loading slot="spinner"></loading>
      </infinite-loading>
   </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import SubNav from '../component/SubNav.vue';
    import Loading from '../component/Loading.vue';
    import List from '../component/List.vue';
    import { mapState, mapActions } from 'vuex';

   export default {
       name: 'home-view',
       components: { SubNav, Loading, InfiniteLoading, List},
       computed: {
           ...mapState({
               // 映射 this.events 为 store.state.events mapState中的计算属性就与localState计算属性混合一起
               // mapState 函数返回的是一个对象，为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象展开运算符。
               events: state => state.activities.events
           })
       },
       methods: {
           // use vue-infinite-loading
           onInfinite(){
               setTimeout(() => {
                   this.loadMore()
                   //  告诉组件 数据下载成功完毕
                   this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
               }, 1000)
           },
        //  使用mapActions分发 映射 this.loadMore() 为 this.$store.dispatch('loadMore')
            ...mapActions([
                'loadMore'
            ])
       }
   }

</script>

<style lang="scss" scoped>
    .sub-nav{
        margin: 0 1.8rem;
        padding-top: 0.2rem;
    }
</style>
